<template>
  <div>
    <div class="buy-detail">
      <!-- 底部按钮 -->
      <footer class="bottom-button">
        <div class="counter">
          <span class="minus" :class="{disabled: buyNum <= 1}" @click="minus">—</span>
          <span class="num"><input type="number" v-model="buyNum"></span>
          <span class="plus" :class="{disabled: plusDis}" @click="plus">+</span>
        </div>
        <mt-button @click.native="doBuy" class="blue" :disabled="(Number(info.selling_cnt) === 0 && !info.platform) || buyBtnDisabled">立即购买</mt-button>
      </footer>

      <!-- 属性卡片 -->
      <div class="block shadow">
        <div class="big-title">
          <span>{{info.name}}</span>
          <span class="red">¥ {{info.sell_price}}</span>
        </div>

        <div class="flex">
          <div class="item">
            <img :src="info.image">
            <span class="text">{{info.suffix_name}}</span>
          </div>
          <div class="item right">
            <span class="text line-through">市场价：¥{{info.market_price}}</span>
          </div>
        </div>

        <div class="hint">{{info.hint_text}}</div>
        <div class="line"></div>

        <div class="flex">
          <div class="item">
            <img
              :src="`/src/assets/icons/heart-${info.if_attention ? 'red' : 'gray'}.png`"
              @click="buyAttention(info.id, info.if_attention)">
            <span class="text mini" :class="{red: info.if_attention}">{{info.attention_cnt}}</span>
          </div>
          <div class="item right">
            <span class="text mini">出售中：{{info.selling_cnt}}个</span>&nbsp;&nbsp;
            <span class="text mini">已出售：{{info.sold_cnt}}单</span>
          </div>
        </div>
      </div>

      <!-- 小卡片 -->
      <div class="block">
        <div class="hint-o">
          <div class="title">温馨提示：</div>
          <div class="desc" v-html="info.hint"></div>
        </div>
        <p class="title">商品详情</p>
        <div v-html="info.detail"></div>
      </div>

      <!-- 小卡片 -->
      <div class="block">
        <p class="title">使用说明</p>
        <div ref="instruction" :class="{hide: !isHide}" v-html="info.use_instruction"></div>
        <div class="read-more" :class="{hide: isHide}" @click="showContent">
          <span>如您第一次购买，请阅读</span>
          <span class="link">使用细则</span>
          <img src="/src/assets/icons/arrow-down.png">
        </div>
      </div>

      <!-- 小卡片 -->
      <div class="block">
        <p class="title">适用门店</p>
        <div v-html="info.suitable_shop_info"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'Mint-ui'

  export default {
    name: 'BuyDetail',
    data () {
      return {
        info: {},
        isHide: false,
        // popup层
        popupVisible: false,
        buyNum: 1,
        canBuyNum: 0,
        buyBtnDisabled: false
      }
    },
    watch: {
      buyNum (v) {
        this.buyBtnDisabled = v > this.canBuyNum
      }
    },
    computed: {
      plusDis () {
        return this.buyNum >= this.canBuyNum
      }
    },
    methods: {
      showContent () {
        this.isHide = true
      },
      minus () {
        if (this.buyNum <= 1) {
          return false
        }
        this.buyNum--
      },
      plus () {
        if (this.buyNum >= this.canBuyNum) {
          return false
        }
        this.buyNum++
      },
      getInfo () {
        let params = {act_gid: this.$route.params.id}
        this.$post('/vue/goods/detail', params, true).then(data => {
          this.info = data
          this.canBuyNum = Number(this.info.max_amount) > Number(this.info.selling_cnt) ? Number(this.info.selling_cnt) : Number(this.info.max_amount)
          if (this.info.platform) {
            this.canBuyNum = 1
          }
          // 修改标题
          window.document.title = `${data.name} ${data.suffix_name}`
        })
      },
      doBuy () {
        let params = {
          num: this.buyNum,
          act_gid: this.$route.params.id
        }
        this.$post('/vue/goods/do_buy', params).then(data => {
          msg('下单成功')
          if (this.info.platform) {
            this.$router.push({name: 'PayPlatform', params: {id: data.order_id}})
          } else {
            this.$router.push({name: 'Pay', params: {id: data.order_id}})
          }
        })
      },
      // 关注和取消购买商品
      buyAttention (id, status) {
        let params = {act_gid: id}
        let url = ''
        if (status) {
          url = 'remove_manage'
        } else {
          url = 'add_to_manage'
        }
        this.$post(`/vue/goods/${url}`, params).then(data => {
          this.info.if_attention = !status
          if (status) {
            this.info.attention_cnt--
          } else {
            this.info.attention_cnt++
          }
        })
      }
    },
    mounted () {
      this.getInfo()
    }
  }
  const msg = m => {
    Toast({
      message: m,
      position: 'middle',
      duration: 2000
    })
  }
</script>

<style lang="less">
  @c-80: rgb(80, 80, 80);
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-246: rgb(246, 246, 246);
  @c-red: rgb(255, 129, 98);
  @c-dark-red: rgb(217, 117, 99);
  @c-light-blue: rgb(242, 247, 250);
  @c-blue: rgb(108, 184, 222);
  @c-orange: rgb(245, 166, 35);

  .buy-detail {
    height: calc(~'100vh - 57px');
    padding-bottom: 57px;
    background-color: #FFF;
    overflow-x: hidden;
    overflow-y: scroll;
    .block {
      padding: 12px 12px 0;
      font-size: 12px;
      line-height: 24px;
      color: @c-124;
      text-align: left;
      .flex {
        display: flex;
        justify-content: space-between;
        .item {
          flex: 1;
          &.right {
            flex: 0 0 auto;
            text-align: right;
          }
        }
      }
      img {
        width: 24px;
        height: 24px;
        vertical-align: middle;
      }
      .text {
        font-size: 13px;
        line-height: 24px;
        color: @c-124;
        vertical-align: middle;
        &.mini {
          font-size: 12px;
          color: @c-169;
        }
        &.black {
          width: 85%;
          display: inline-block;
          font-size: 16px;
          line-height: 24px;
          color: rgb(44, 46, 55);
        }
        &.red {
          color: @c-red;
        }
      }
      .line-through {
        color: @c-169;
        text-decoration: line-through;
      }
      .hint {
        font-size: 13px;
        line-height: 24px;
        color: @c-dark-red;
      }
      .hint-o {
        margin-bottom: 12px;
        .title {
          font-size: 12px;
          line-height: 24px;
          color: @c-orange;
          margin: 0;
        }
        .desc {
          font-size: 12px;
          line-height: 20px;
          color: @c-169;
        }
      }
      .line {
        width: 100%;
        height: 1px;
        margin: 8px 0;
        background-color: @c-235;
      }
      &.shadow {
        padding-bottom: 8px;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
        &::after {
          display: none;
        }
      }
      &::after {
        content: '';
        margin: 12px -12px 0;
        display: block;
        height: 8px;
        background-color: rgb(240, 244, 247);
      }
      .big-title {
        font-size: 15px;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
        span {
          flex: 1;
          &.red {
            font-size: 16px;
            color: @c-red;
            text-align: right;
          }
        }
      }
      .title {
        font-size: 13px;
        font-weight: bold;
        margin-bottom: 6px;
      }
      .read-more {
        font-size: 12px;
        line-height: 24px;
        color: @c-124;
        text-align: center;
        span {
          vertical-align: middle;
        }
        .link {
          color: @c-blue;
          text-decoration: underline;
        }
        img {
          width: 24px;
          height: 24px;
          vertical-align: middle;
        }
      }
      .hide {
        display: none;
      }
      &.no-line {
        padding: 12px;
        &::after {
          display: none;
        }
      }
      &.explain {
        background-color: @c-246;
        padding: 12px;
        margin: 12px 0;
        .text {
          font-size: 12px;
          line-height: 20px;
          color: @c-169;
        }
        &::after {
          display: none;
        }
      }
    }
    .bottom-button {
      padding: 8px;
      border-top: 1px solid @c-226;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #FFF;
      display: flex;
      justify-content: center;
      .mint-button {
        flex: 0 0 auto;
        height: 40px;
        padding: 7px 0;
        margin: 0 5%;
        width: 45%;
        text-align: center;
        border-radius: 20px;
        &.blue {
          color: #FFF;
          background-color: @c-blue;
        }
        &.black {
          color: @c-124;
          border: 1px solid #000;
        }
        &.is-disabled {
          opacity: 1;
          background-color: @c-226;
          border-color: @c-226;
          .mint-button-text {
            color: #FFF;
          }
        }
        .mint-button-icon {
          line-height: 0;
        }
        .mint-button-text {
          font-size: 13px;
          line-height: 24px;
          display: inline-block;
          vertical-align: middle;
        }
      }
      .counter {
        font-size: 0;
        flex: 1;
        margin: 4px 0;
        span {
          display: inline-block;
          width: 32px;
          height: 32px;
          font-size: 13px;
          line-height: 24px;
          color: @c-124;
          border: 1px solid @c-226;
          box-sizing: border-box;
          vertical-align: middle;
          &.minus {
            line-height: 32px;
            color: @c-80;
          }
          &.plus {
            font-size: 20px;
            line-height: 32px;
            color: @c-80;
          }
          &.num {
            width: 64px;
            line-height: 32px;
            border-left: 0;
            border-right: 0;
            input {
              display: block;
              width: 100%;
              line-height: 30px;
              border: 0;
              text-align: center;
            }
          }
          &.disabled {
            color: @c-226;
          }
        }
      }
    }
  }
</style>